<template>
  <div class="login">
    <div class="left">
      <div style="position: relative">
        <img
          src="../assets/xin/xin (4).png"
          style="height: 55.55vh; width: 100%"
          alt=""
          srcset=""
        />
        <div
          style="
            width: 25%;
            height: 69px;
            padding: 10px;
            display: flex;
            position: absolute;
            top: 0px;
            right: 0px;
            justify-content: center;
            align-items: center;
            background: rgb(255, 255, 255);
          "
        >
          <img
            style="width: 80%; height: 30px"
            src="@/assets/xin/logo.png"
            alt=""
          />
        </div>
      </div>
      <div
        style="
          flex: 1;
          display: flex;
          padding: 16px 80px;
          justify-content: center;
          background: #323f5a;
        "
      >
        <div
          style="
            flex: 1;
            display: flex;
            width: 80%;
            color: #fff;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-bottom: 20px;
            "
          >
            联系我们
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div style="position: relative">
              <div style="font-size: 17px; margin-bottom: 5px">
                业务联系电话
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">13140161000</span>
              </div>
              <div
                @mouseover="ywshang"
                @mouseout="ywchu"
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (6).png"
                /><span>13140161000</span>
              </div>
              <div
                v-if="yewu"
                style="
                  width: 160px;
                  height: 160px;
                  background: #ffffff;
                  display: flex;
                  position: absolute;
                  left: 165px;
                  top: 0px;
                  z-index: 9999;
                  justify-content: center;
                  align-items: center;
                  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.08);
                  border-radius: 20px 20px 20px 20px;
                "
              >
                <img
                  style="width: 140px; height: 140px"
                  src="@/assets/xin/xin (2).png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div style="position: relative">
              <div style="font-size: 17px; margin-bottom: 5px">
                技术联系电话
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">13838271800</span>
              </div>
              <div
                @mouseover="jsshang"
                @mouseout="jschu"
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (6).png"
                /><span>13838271800</span>
              </div>
              <div
                v-if="jishu"
                style="
                  width: 160px;
                  height: 160px;
                  background: #ffffff;
                  display: flex;
                  justify-content: center;
                  position: absolute;
                  left: 165px;
                  top: 0px;
                  z-index: 9999;
                  align-items: center;
                  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.08);
                  border-radius: 20px 20px 20px 20px;
                "
              >
                <img
                  style="width: 140px; height: 140px"
                  src="@/assets/xin/xin (3).png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">服务邮箱</div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (12).png"
                /><span style="color: #9a9a9e">yzdsjyjy@126.com</span>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            width: 80%;
            color: #fff;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-bottom: 20px;
            "
          >
            投诉举报
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">
                违法和不良信息举报
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">0377-62268666</span>
              </div>
            </div>
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">
                投诉侵权及摘抄模仿电话
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">0371-55555404</span>
              </div>
            </div>
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">举报邮箱</div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (12).png"
                /><span style="color: #9a9a9e">yzdsjyjy@126.com</span>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            width: 80%;
            color: #fff;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-bottom: 20px;
            "
          >
            官方客服
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div
              style="
                width: 180px;
                height: 180px;
                background: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.08);
                border-radius: 20px 20px 20px 20px;
              "
            >
              <img
                style="width: 160px; height: 160px"
                src="@/assets/xin/xin (1).png"
                alt=""
                srcset=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="loginCard" v-if="!revise">
        <div class="loginTitle">
          <img src="../assets/login/welcome.png" alt />
        </div>
        <div class="tab">
          <div @click="tab(1)">
            手机登录
            <span v-if="active == 1" class="blocks"></span>
          </div>
          <div @click="tab(2)">
            账号登录
            <span v-if="active == 2" class="blocks"></span>
          </div>
        </div>
        <!-- 账号登录 -->
        <div class="form" v-if="active == 2">
          <el-form
            class="cionlogin"
            :model="loginFrom"
            :rules="loginRules"
            ref="ruleForm"
          >
            <el-form-item prop="username">
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入账号"
                v-model="loginFrom.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :type="passw"
                prefix-icon="el-icon-lock"
                v-model="loginFrom.password"
                placeholder="请输入密码"
                clearable
                show-password
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div style="display: flex; justify-content: space-between">
            <el-link type="primary" @click="$router.push('/register')"
              >注册账号</el-link
            >
            <el-link type="primary" @click="revise = true">找回密码</el-link>
          </div>
          <div class="loginBtn">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </div>
        <!-- 账号登录 -->
        <!-- 手机登录 -->
        <div class="form" v-if="active == 1">
          <div class="caImg">
            <el-form
              class="cionlogin"
              :model="loginFrom"
              :rules="loginRules"
              ref="ruleForm"
            >
              <el-form-item prop="username">
                <el-input
                  prefix-icon="el-icon-user-solid"
                  placeholder="请输入手机号"
                  v-model="loginFrom.mobile"
                ></el-input>
              </el-form-item>

              <el-form-item prop="yzm">
                <div class="code">
                  <el-input
                    prefix-icon="el-icon-message"
                    placeholder="请输入验证码"
                    v-model="loginFrom.recode"
                  ></el-input>
                  <div
                    style="display: flex;
    justify-content: center;
    margin-left: 10px;
}"
                    class="codeImg"
                    @click="getcodeimg"
                  >
                    <el-button
                      :disabled="times !== 120"
                      style="width: 90px; padding: 9px; height: 40px"
                      @click="sjsend"
                      type="primary"
                      plain
                      >{{ yanzheng }}</el-button
                    >
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="loginBtn">
            <el-button type="primary" @click="logins">登录</el-button>
          </div>
        </div>
        <!-- 手机登录 -->
      </div>
      <!-- 找回密码 -->
      <div class="loginCard" v-if="revise">
        <div class="loginTitle">
          <div style="font-size: 25px; font-weight: 900" class="zititet">
            密码找回
          </div>
        </div>
        <div class="form" v-if="active == 2">
          <el-form
            class="cionlogin"
            :model="loginFrom"
            :rules="loginRules"
            ref="ruleForm"
          >
            <el-form-item prop="username">
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入手机号"
                v-model="loginFrom.mobile"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :type="passw"
                prefix-icon="el-icon-lock"
                v-model="loginFrom.password"
                placeholder="请输入密码"
                clearable
                show-password
              >
                <!-- <i slot="suffix" :class="icon" @click="showPass"></i> -->
              </el-input>
              <!-- <el-input
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                type="password"
                v-model="loginFrom.password"
              ></el-input> -->
            </el-form-item>

            <el-form-item prop="yzm">
              <div class="code">
                <el-input
                  prefix-icon="el-icon-message"
                  placeholder="请输入验证码"
                  v-model="loginFrom.recode"
                ></el-input>
                <div
                  style="display: flex;
    justify-content: center;
    margin-left: 10px;
}"
                  class="codeImg"
                  @click="getcodeimg"
                >
                  <el-button
                    :disabled="times !== 120"
                    style="width: 90px; padding: 9px; height: 40px"
                    @click="zhaosend"
                    type="primary"
                    plain
                    >{{ yanzheng }}</el-button
                  >
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div style="display: flex; justify-content: space-between">
            <el-link type="primary" @click="$router.push('/register')"
              >注册账号</el-link
            >
            <el-link type="primary" @click="revise = false">去登陆</el-link>
            <!-- <el-checkbox label="记住密码" name="type"></el-checkbox> -->
            <!-- <div @click="$router.push('/register')">注册账号</div> -->
            <!-- <div @click="$p.url('/forget')">忘记密码</div> -->
          </div>
          <div class="loginBtn">
            <el-button type="primary" @click="loginti">提交</el-button>
          </div>
        </div>
      </div>
      <!-- 找回密码 -->
    </div>
    <!-- PDF预览 -->
    <el-dialog
      title="PDF预览"
      :visible.sync="dialogVisible4L"
      width="70%"
      append-to-body
      center
    >
      <iframe
        :src="pdfSrc"
        frameborder="0"
        style="width: 100%; height: 100%"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { login, logins, getrenzheng } from "@/api/user";
import { personalrealname } from "@/api/personalrealname";
import { jiaoyan, loginsend, loginbymobile, savepwd } from "@/api/user";
import axios from "axios";
export default {
  data() {
    return {
      active: 2,
      loginFrom: {
        // username: "wang",
        // password: "111111",
        username: "",
        password: "",
        mobile: "",
        yzm: "",
        id: "",
      },
      jishu: false,
      yewu: false,
      times: 120,
      yanzheng: "获取验证码",
      pdfSrc:
        "http://192.168.0.28:8082//uploads/image/20221128/63841ee1f366a.pdf",
      dialogVisible4L: false,
      codeUrl: "",
      //用于显示或隐藏添加修改表单
      add: false,
      //用于改变Input类型
      passw: "password",
      revise: false,
      //用于更换Input中的图标
      icon: "el-input__icon el-icon-view",
      loginRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // code: [
        //     { required: true, message: '请输入验证码', trigger: 'blur' },
        // ],
      },
      captchaOnOff: false,
    };
  },
  created() {
    if (sessionStorage.getItem("token")) {
      this.$router.push({
        path: "/",
      });
    }
  },
  mounted() {
    this.getcodeimg();
  },
  methods: {
    getcodeimg() {
      // getcode().then(res=>{
      //     this.codeUrl = window.URL.createObjectURL(res)
      // })
    },
    sjsend() {
      if (this.loginFrom.mobile == "") {
        return this.$message({
          showClose: true,
          message: "请输入手机号",
          type: "warning",
        });
      }
      loginsend(this.loginFrom).then((res) => {
        if (res.data.code == 1) {
          this.cionbutton = true;
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.daojishi();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    zhaosend() {
      if (this.loginFrom.mobile == "") {
        return this.$message({
          showClose: true,
          message: "请输入手机号",
          type: "warning",
        });
      }
      loginsend(this.loginFrom).then((res) => {
        if (res.data.code == 1) {
          this.cionbutton = true;
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.daojishi();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    send() {
      if (this.mobile == "") {
        return this.$message({
          showClose: true,
          message: "请输入手机号",
          type: "warning",
        });
      }
      // this.daojishi();
      // return;
      axios({
        url: "http://192.168.0.28:8082/apply/sms/send",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          mobile: this.loginFrom.username,
          event: "register",
        },
        timeout: 10000,
        headers: {
          token: sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          console.log(res.data.msg);
          if (res.data.code == 1) {
            this.cionbutton = true;
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.daojishi();
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.msg);
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("失败", err);
          // this.$notify.error({
          //   message: err.response.data.msg,
          // });
        });
    },
    showPass() {
      //点击图标是密码隐藏或显示
      if (this.passw == "text") {
        this.passw = "password";
        //更换图标
        this.icon = "el-input__icon el-icon-view";
      } else {
        this.passw = "text";
        this.icon = "el-input__icon el-icon-loading";
      }
    },
    logins() {
      jiaoyan(this.loginFrom).then((res) => {
        // console.log( res.data.data.id,'user');
        if (res.data.code == 1) {
          this.shouji();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 手机号登录
    shouji() {
      loginbymobile(this.loginFrom).then((res) => {
        if (res.data.code == 1) {
          sessionStorage.setItem("token", res.data.data.token);
          sessionStorage.setItem("username", res.data.data.username);
          sessionStorage.setItem("avatar", res.data.data.avatar);
          sessionStorage.setItem("cardname", res.data.data.cardname);
          sessionStorage.setItem("company_name", res.data.data.company_name);
          sessionStorage.setItem("unify_code", res.data.data.unify_code);
          if (res.data.data.qyrz == 1) {
            this.$router.push({
              path: "/",
            });
          } else {
            this.$message({
              showClose: true,
              message: "企业未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
            return;
          }

          return;

          if (res.data.data.grrz == 0) {
            this.$message({
              showClose: true,
              message: "个人未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
          } else {
          }
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },
    login() {
      //  this.$router.push({
      //       path: "/",
      //     });

      login(this.loginFrom).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          sessionStorage.setItem("token", res.data.data.token);
          if (res.data.data.qyrz == 1) {
            this.$router.push({
              path: "/",
            });
          } else {
            this.$message({
              showClose: true,
              message: "企业未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
            return;
          } 
          // this.$router.push({
          //   path: "/",
          // });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "warning",
          });
        }
        return;
        if (res.data.code == 1) {
          sessionStorage.setItem("token", res.data.data.token);
          sessionStorage.setItem("username", res.data.data.username);
          sessionStorage.setItem("avatar", res.data.data.avatar);
          sessionStorage.setItem("cardname", res.data.data.cardname);
          sessionStorage.setItem("company_name", res.data.data.company_name);
          sessionStorage.setItem("unify_code", res.data.data.unify_code);
          if (res.data.data.qyrz == 1) {
            this.$router.push({
              path: "/",
            });
          } else {
            this.$message({
              showClose: true,
              message: "企业未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
            return;
          }

          return;

          if (res.data.data.grrz == 0) {
            this.$message({
              showClose: true,
              message: "个人未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
          } else {
          }
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },
    daojishi() {
      // return
      var that = this;
      if (this.times == 0) {
        this.times = 120;
        clearTimeout(this.yanTimer);
        this.cionbutton = false;
        this.yanzheng = "获取验证码";
      } else {
        this.times--;
        this.yanzheng = this.times + "s";
        this.yanTimer = setTimeout(() => {
          that.daojishi();
        }, 1000);
      }
    },
    loginti() {
      jiaoyan(this.loginFrom).then((res) => {
        // console.log( res.data.data.id,'user');
        if (res.data.code == 1) {
          this.xiugai();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    ywshang() {
      this.yewu = true;
    },
    ywchu() {
      this.yewu = false;
    },
    jsshang() {
      this.jishu = true;
    },
    jschu() {
      this.jishu = false;
    },
    //修改密码
    xiugai() {
      savepwd(this.loginFrom).then((res) => {
        if (res.data.code == 1) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.revise = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    tab(i) {
      this.active = i;
      clearTimeout(this.yanTimer);
      this.times = 120;
      this.cionbutton = false;
      this.yanzheng = "获取验证码";
    },
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("blobToBase64 error"));
        };
      });
    },
  },
};
</script>
<style>
.cionlogin {
  width: 100%;
}
.cionlogin .el-input--prefix .el-input__inner {
  padding-left: 40px !important;
}
.el-icon-message:before {
  content: "\e72b";
  font-size: 22px;
}
.el-icon-user-solid:before {
  content: "\E7A5";
  font-size: 22px;
}
.el-icon-lock:before {
  content: "\E6E5";
  font-size: 22px;
}
</style>
<style scoped lang="scss">
.blocks {
  display: flex !important;
  padding-right: 20px !important;
  justify-content: end !important;
}
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background: #5a7aec;
  .left {
    width: 60%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    height: 100%;
    .leftBanner {
      width: 690px;
      height: 690px;
    }
  }
  .right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;

    .loginCard {
      // padding: 30px;
      width: 400px;
      height: 400px;
      box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid #f5f5f5;
      .tab {
        display: flex;
        align-items: center;
        // justify-content: space-evenly;
        padding-left: 30px;
        div {
          font-size: 18px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          width: 30%;
          height: 60px;
          line-height: 75px;
          text-align: center;
          position: relative;
          cursor: pointer;
          span {
            display: inline-block;
            width: 100%;
            height: 3px;
            background: #1890ff;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
      .title {
        margin-top: 10px;
        margin-left: 150px;
      }
      .form {
        width: 400px;
        padding: 30px;
        .caImg {
          // width: 200px;
          height: 113px;
          margin: 0 auto;
          margin-top: 5px;
          margin-bottom: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .loginTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
      }
      .isPassword {
        font-size: 12px;
        display: flex;
        padding-left: 10px;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-between;
        & > div {
          cursor: pointer;
        }
        & > div:nth-child(1) {
          color: #1890ff;
        }
      }
      .el-form-item__error {
        padding-left: 10px;
      }

      .code {
        display: flex;
        align-items: center;
        .codeImg {
          height: 40px;
        }
      }
      .loginBtn {
        padding-top: 23px;
        width: 100%;
        display: flex;
        justify-content: center;
        // margin-left: 35px;
        button {
          width: 300px;
          background: #1890ff;
          color: #fff;
        }
      }
    }
  }
}
</style>
